<template>
	<view class="detail">
		<scroll-view scroll-y class="main">
			<view class="header">
				<image src="../../../static/logo.png" class="cover" mode=""></image>
				<view class="info">
					<view class="title">
						<view class="l">任务标题</view>
					</view>
					<view class="types">
						<view class="btn">注册</view>
						<view class=" btn1">抖音</view>
					</view>
					
				</view>
				<view class="moeny">佣金6元</view>
			</view>
			<view class="numBox">
				<view class="num">
					<view class="t">3小时</view>
					<view class="b">限时完成</view>
				</view>
				<view class="num">
					<view class="t">3小时</view>
					<view class="b">限时审核</view>
				</view>
				<view class="num">
					<view class="t">3小时</view>
					<view class="b">已完成数</view>
				</view>
				<view class="num">
					<view class="t">3小时</view>
					<view class="b">委托赏金</view>
				</view>
			</view>
			<view class="titles">任务说明</view>
			<view class="desc">
				具体描述文本内容具体描述文本内容，具体描述文本内容具体描述文本内容，具体描述文本内容
			</view>
			<view class="titles">任务步骤/流程</view>
			<view class="steps">
				<view class="step">
					<view class="l">
						<image src="../../../static/task/step.png" mode="" class="icon"></image>
						<view class="word">第1步</view>
					</view>
					<view class="r">
						<view class="title">打开链接</view>
						<view class="copy">复制</view>
						<view class="btns">
							<view class="btn">点击访问链接 <image src="../../../static/task/link.png" class="icon" mode=""></image></view>
							<view class="btn btn1">点击访问链接 <image src="../../../static/task/copy.png" class="icon" mode=""></image></view>
						</view>
					</view>
				</view>
				<view class="step">
					<view class="l">
						<image src="../../../static/task/step.png" mode="" class="icon"></image>
						<view class="word">第2步</view>
					</view>
					<view class="r">
						<view class="title">打开链接</view>
						<view class="copy">复制</view>
						<image src="../../../static/logo.png"  mode="widthFix" class="example"></image>
					</view>
				</view>
			</view>
			<view class="titles">上传验证/审核</view>
			<view class="steps">
				<view class="step">
					<view class="l">
						<image src="../../../static/task/step.png" mode="" class="icon"></image>
						<view class="word">第1步</view>
					</view>
					<view class="r">
						<view class="title">开通短信截图</view>
						<view class="add">
							<image src="../../../static/logo.png" class="example" mode="widthFix"></image>
							<image src="../../../static/logo.png" class="example" mode="widthFix"></image>
							
						</view>
					</view>
				</view>
				<view class="step">
					<view class="l">
						<image src="../../../static/task/step.png" mode="" class="icon"></image>
						<view class="word">第2步</view>
					</view>
					<view class="r">
						<view class="title">打开链接</view>
						<input type="text" value="" class="inputBox" />
					</view>
				</view>
			</view>
			
		</scroll-view>
		<view class="join">
			<view class="btn">审核拒绝</view>
			<view class="btn1">审核通过</view>
		</view>
		<u-popup :show="show" @close="show = false" @open="show = true" mode="center" round="10">
			<view class="refuse">
				<textarea value="" placeholder="请输入拒绝理由" class="reason" />
				<view class="addBox">
					<image src="../../../static/task/add.png" class="icon" mode=""></image>
					<view class="word">上传截图</view>
				</view>
				<view class="btn">提交</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: true
			};
		}
	}
</script>

<style lang="scss" scoped>
	page{
		height: 100%;
	}
.detail{
	height: 100%;
	overflow: hidden;
	position: relative;
	display: flex;
	flex-direction: column;
	.refuse{
		padding: 40rpx;
		.reason{
			width: 400rpx;
			height: 180rpx;
			border-bottom: 1px solid #eee;
			margin-bottom: 20rpx;
		}
		.addBox{
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			border: 1px solid #FFCE54;
			width: 130rpx;
			height: 130rpx;
			border-radius: 10rpx;
			.icon{
				width: 27rpx;
				height: 27rpx;
				margin-bottom: 10rpx;
			}
			.word{
				color: #FF8007;
				font-size: 22rpx;
			}
		}
		.btn{
			width: 200rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			background: #FF5B1A;
			font-size: 28rpx;
			border-radius: 10rpx;
			margin: 20rpx auto 0;
		}
	}
	.main{
		overflow: hidden;
		position: absolute;
		left: 0;
		width: 100%;
		bottom: 120rpx;
		top: 0;
	}
	.titles{
		color: #191615;
		font-size: 34rpx;
		padding: 20rpx 30rpx 10rpx;
		font-weight: bold;
	}
	.join{
		
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		font-size: 32rpx;
		color: #191615;
		width: 100%;
		position: absolute;
		left: 00rpx;
		bottom: 20rpx;
		flex-shrink: 0;
		.btn{
			background-color: #fff;
			border: 1px solid #eee;
			box-sizing: border-box;
			width: 200rpx;
			border-radius: 10rpx;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.btn1{
			background: linear-gradient(to right, #FFDF41, #FFC141);
			width: 280rpx;
			border-radius: 10rpx;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.steps{
		padding: 20rpx;
	}
	.step{
		display: flex;
		
		.r{
			flex: 1;
			padding-left: 30rpx;
			position: relative;
			.title{
				color: #575859;
				font-size: 30rpx;
				margin-bottom: 10rpx;
			}
			.copy{
				color: #428DFC;
				font-size: 24rpx;
				margin-bottom: 20rpx;
			}
			.btns{
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				.btn{
					flex: 1;
					height: 60rpx;
					background-color: #FFFAE5;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #FF8007;
					.icon{
						width: 23rpx;
						height: 31rpx;
						margin-left: 10rpx;
					}
				}
				.btn1{
					background-color: #E9F3FF;
					color: #428DFC;
					margin-left: 20rpx;
				}
			}
			.inputBox{
				background: #F6F6F6;
				height: 74rpx;
				line-height: 74rpx;
				padding-left: 20rpx;
				width: 370rpx;
				border-radius: 10rpx;
			}
			.add{
				display: flex;
				
			}
			.example{
				width: 228rpx;
				margin-bottom: 20rpx;
			}
			.addBox{
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				border: 1px solid #FFCE54;
				width: 130rpx;
				height: 130rpx;
				border-radius: 10rpx;
				.icon{
					width: 27rpx;
					height: 27rpx;
					margin-bottom: 10rpx;
				}
				.word{
					color: #FF8007;
					font-size: 22rpx;
				}
			}
			.example:first-of-type{
				margin-right: 20rpx;
			}
		}
		.r::before{
			content: '';
			position: absolute;
			width: 16rpx;
			height: 16rpx;
			background-color: #FFC141;
			border-radius: 8rpx;
			top: 8rpx;
			left: -8rpx;
			z-index: 10;
		}
		.r::after{
			content: '';
			position: absolute;
			left: 0;
			top: 20rpx;
			width: 2px;
			bottom: 0;
			background-color: #F6F6F6;
		}
		.l{
			width: 109rpx;
			height: 43rpx;
			position: relative;
			margin-right: 20rpx;
			.icon{
				width: 109rpx;
				height: 43rpx;
			}
			.word{
				width: 109rpx;
				height: 43rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: bold;
				position: absolute;
				left: 0;
				top: 0;
				font-size: 22rpx;
				color: #191615;
			}
		}
	}
	.desc{
		color: #575859;
		font-size: 24rpx;
		line-height: 40rpx;
		padding: 10rpx 30rpx;
	}
	.numBox{
		margin: 0 30rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 0 10rpx rgba(98, 98, 98, 0.2);
		padding: 30rpx  20rpx;
		.num{
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
			.t{
				color: #FF8007;
				font-size: 30rpx;
			}
			.b{
				font-size: 24rpx;
				color: #575859;
			}
		}
	}
	.header{
		display: flex;
		margin: 10rpx 0;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 10rpx;
		align-items: center;
		position: relative;
		
		.cover{
			width: 140rpx;
			height: 140rpx;
			margin-right: 20rpx;
			flex-direction: 0;
			border-radius: 10rpx;
		}
		.address{
			font-size: 25rpx;
			color: #575859;
		}
		.moeny{
			font-size: 30rpx;
			color: #FF5B1A;
			margin-left: 40rpx;
		}
		.info{
			flex: 1;
			.title{
				display: flex;
				align-items: center;
				.l{
					flex: 1;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					font-weight: bold;
				}
				.r{
					color: #428DFC;
					font-size: 24rpx;
					flex-shrink: 0;
					display: flex;
					align-items: center;
				}
			}
			.types{
				display: flex;
				align-items: center;
				margin: 20rpx 0;
				.btn{
					background: #428DFC;
					height: 36rpx;
					border-radius: 18rpx;
					padding: 0 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #FFFFFF;
					font-size: 24rpx;
					margin-right: 10rpx;
				}
				.btn1{
					color: #FF8007;
					font-size: 24rpx;
				}
			}
			.numBox{
				display: flex;
				align-items: center;
				.num{
					display: flex;
					align-items: center;
					font-size: 22rpx;
					margin-left: 10rpx;
					.word{
						color: #428DFC;
					}
				}
			}
		}
	}
}
</style>
